import { useState } from "react";

let initialCounter :number[] = [0,0,0];
const CounterList = () => {
	const [counters, setCounters] = useState(initialCounter);

	const handleClick = (index : number) => {
		setCounters(counters.map((counter, i) => {
			if( index === i ) {
				return counter + 1;
			} else {
				return counter;
			}
		}));
	};

	return (
		<ul>
			{counters.map((counter, index) => (
				<li key={index}>
					{counter}
					<button onClick={() => handleClick(index) }>
						+1
					</button>
				</li>
			))}
		</ul>
	);
};

export default CounterList;